<template>
  <div id="all">
    <div class="left">
      <img :src="item.goods_image">
    </div>
    <div class="right">
      <div class="top">
        <p>{{ item.goods_name }}</p>
      </div>
      <div class="bottom">
        <div class="num">x{{ item.total_num }}</div>
        <div class="price">￥{{ item.total_pay_price }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: {
    item: Object
  }
}
</script>

<style scoped>
#all {
  padding:10px;
  margin-top:10px;
  display:flex;
  border-bottom:1px solid pink;
  background:white;
}
.all .left img {
  width:80px;
  height:80px;
  margin-right:10px;
}
.all .right {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.all .right .top p {
  height:40px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.all .right .bottom {
  display:flex;
  justify-content:space-between;
}
.all .right .bottom .price {
  color:red;
}
</style>
